<template>
  <div>
    <el-row class="custom-title m-t-20 m-b-20">
        <h3>发行费用</h3>
        <el-button type="primary" size="medium" class="m-l-20" :disabled="eventId==0" @click="save" round>保存</el-button>
    </el-row>
    <el-form label-width="80px" class="custom-box p-20" :model="eventCostVo">
        <el-row>
            <el-col :span="12">
              <el-row>
                    <el-col :span="12">
                      <el-form-item label="发行费用总价" class="line-h-20">
                          <el-input type="number" v-model="eventCostVo.costTotal">
                              <template slot="append">万</template>
                          </el-input>
                      </el-form-item>
                      </el-col>
                      <el-col :span="12">
                      <el-form-item label="币种">
                        <el-select v-model="eventCostVo.currencyType">
                          <el-option v-for="(item,index) in initView.currencyType" :key="index" :label="item.dictName" :value="item.dictValue-0"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                      <el-form-item label="保荐费用">
                          <el-input type="number" value="number" v-model="eventCostVo.costSponsor">
                              <template slot="append">万</template>
                          </el-input>
                      </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="承销费用">
                              <el-input v-model="eventCostVo.costUnderwriting">
                                <template slot="append">万</template>
                              </el-input>
                          </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="保荐及承销费用" class="line-h-20">
                    <el-input type="number" v-model="eventCostVo.costAll">
                        <template slot="append">万</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <el-col :span="12">
                      <el-form-item label="律师费用">
                          <el-input type="number" v-model="eventCostVo.costAttorney">
                              <template slot="append">万</template>
                          </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="审计费用">
                          <el-input type="number" v-model="eventCostVo.costAudit">
                              <template slot="append">万</template>
                          </el-input>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="费用说明">
                    <el-input v-model="eventCostVo.remark" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch, Prop } from 'vue-property-decorator';
import { EventCostVo } from '../../../../api/Interface';
import ServiceEvent from '../../../../service/event/event-cost-controller';

@Component({
  components: { }
})
export default class Cost extends Vue {
  @Prop({ default: 0 })
  public eventId: number;

  // 初始化数据 相当于data
  public value: number = 0;
  public eventCostVo: EventCostVo = {} as EventCostVo; // 发行费用信息
  public initView = {
    currencyType: this.$store.state.user.dictionary.dicList.currencyType // 币种
  };


  // refs
  public $refs: { };

  // watch
  @Watch('value')
  public onChildChanged(val: number, oldVal: number) {
    return val;
  }

  // 声明周期钩子
  public mounted() {
    this.getCostInfoById();
  }

  // 方法
  public save() {
    if (this.eventCostVo.eventId === null) {
      this.addCost();
    } else {
      this.modCost();
    }
  }
  // 添加发行费用信息
  public async addCost() {
    this.eventCostVo.eventId = this.eventId;
    const { resCode } = await ServiceEvent.addSaveEventCost(this.eventCostVo);
    if (resCode === '0') {
      this.$message.success('添加成功！');
    }
  }
  // 修改发行费用信息
  public async modCost() {
    const { resCode } = await ServiceEvent.updateEventCost(this.eventCostVo);
    if (resCode === '0') {
      this.$message.success('修改成功！');
    }
  }
  // 根据事件Id获取发行费用信息
  public async getCostInfoById() {
    const { resCode, data } = await ServiceEvent.getEventCostDetail(this.$route.params.eventId);
    if (resCode === '0') {
      this.eventCostVo = data;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.m-l-20{
  margin-left: 20px;
}
</style>
